<template>
  <!-- 印章变更作废-->
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false" id="sealchangeContent">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle">
              <a-input placeholder="请输入标题" :disabled="formDisabled" v-model="model.bpmBizTitle"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handlerId">
<!--              <select-person-input-->
<!--                :disabled=formDisabled-->
<!--                v-model="model.handlerId" disabled/>-->
              <select-user-by-dep :disabled="formDisabled" :multi="false" v-model="model.handlerId" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyDept">
              <!--              <a-input :disabled=formDisabled v-model="model.handlerDeptId" placeholder="请输入经办部门"  ></a-input>-->
              <j-select-depart :disabled=formDisabled v-model="model.applyDept" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <j-date  placeholder="请选择申请时间" v-model="model.createTime" :show-time="true"
                      date-format="YYYY-MM-DD HH:mm" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="选择印章" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ids">
              <!--<a-input :disabled=formDisabled v-model="model.xmcjr" placeholder="请输入项目承接人"  ></a-input>-->
              <select-normal-seal-input
                :disabled="sealDisabled"
                v-model="model.ids"
                @ccCopy="copeData"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24" v-show="model.changeType == 1 || model.changeType == null">
            <a-form-model-item label="原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reason">
              <a-textarea :rows="4" :max-length="500" :disabled=formDisabled v-model="model.reason" placeholder="请输入原因"></a-textarea>
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
    </j-form-container>
    <a-row :gutter="48" v-if="formBpm">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary" @click="onPrint">打印</a-button>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import SelectNormalSealInput from '@/views/erp/administration/seal/SelectNormalSealInput'
import moment from 'moment';
import { mapGetters } from 'vuex';
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import CommonFlowList from '@/views/components/CommonFlowList.vue';
import Print from '@/utils/print/printarea.js';
export default {
  // props: ['isShow'],

  name: 'ErpSealStatusChangeForm',
  components: {
    SelectNormalSealInput,
    SelectUserByDep,
    CommonFlowList
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: ()=>{},
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
  },
  data() {
    return {
      // is_show: this.props.isshow, //0：显示原因，1：不显示原因
      is_show: false,
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
        bpmBizTitle:[
          { required: true, message: '请输入标题!' }
        ],
        reason: [
          { required: false },
          // { pattern: /^\d{6,16}$/, message: '请输入6到16位数字!'},
        ],
        ids: [
          { required: true, message: '请选择印章!' },
        ],
        applyDept: [
          { required: true, message: '请选择申请部门!', trigger: 'change'}
        ],
      },
      url: {
        add: '/api/erp/administration/seal/erpSealCertificationChangeRecord/addz',
        edit: '/api/erp/administration/seal/erpSealStatusChange/edit2',
        queryById: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryById',
        newUrl: '/api/erp/administration/seal/erpSealStatusChange/queryByIdNew'
      },
      sealDisabled: false
    }
  },
  computed: {
    formDisabled(){
      if(this.formBpm===true){
        if(this.formData.disabled===false){
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton(){
      if(this.formBpm===true){
        if(this.formData.disabled===false){
          return true
        }
      }
      return false
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
  },
  methods: {
    ...mapGetters(['userInfo']),
    copeData(data) {
      this.model.ids = data;
    },

    // //业主联系人
    // contactsChange(val) {
    //   //debugger
    //   getAction('/api/erp/omc/customermanager/erpOmcCustomerManagerContact/queryById', { id: val }).then((res) => {
    //     if (res.success) {
    //       let data = res.result.records || res.result
    //       //debugger;
    //       //this.model.lxdh = data.lxfs;
    //
    //       this.$set(this.model, 'ownerLinkman', val)
    //     }
    //   })
    // },

    add(isshow) {
      this.is_show = isshow
      this.edit(this.modelDefault);
      this.model.handlerId = this.userInfo().empId;
      this.model.applyDept = this.userInfo().deptId; //申请部门
      this.model.createTime = moment().format('YYYY-MM-DD HH:mm');
      this.sealDisabled = false;
    },
    // stampmark() {
    //   //this.is_show =
    //   this.edit(this.modelDefault);
    // },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.sealDisabled = true;
      this.visible = true;
      var params = record.id
      getAction(this.url.queryById, { id: params }).then((res) => {
        if (res.success) {
          // const model = res.result
          // this.$refs.realForm.edit(model);
          this.model = res.result
          this.model.ids = this.model.baseId
        }
      })
    },
    //渲染流程表单数据
    showFlowData(){
      if(this.formBpm === true){
        let params = {id:this.formData.dataId};
        getAction(this.url.queryById, params).then((res)=>{
          if(res.success){
            this.edit (res.result);
          }
        });
      }
    },
    submitForm() {
      if (this.model.id != null && this.model.id != '' && this.model.id != undefined) {
        this.$delete(this.validatorRules, 'ids');
      }

      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        } else {
          that.$emit('unButtonDisable')
        }

      })

      this.$set(this.validatorRules, 'ids', [{ required: true, message: '请选择印章!' },]);
    },

    // 点击打印
    onPrint () {
      let print = new Print({
        el: '#sealchangeContent',
        popTitle: '印章资质使用申请详情 · 禾美环保',
        endCallback() {

        }
      })
    }
  }
}
</script>
<style>
  @import "../../../../../utils/print.css";
</style>